window.onload = function () {

    const data = {
        fetchID: function () {
            const query = location.search;
            const Reg = /id=(\w+)&?/
            return Reg.exec(query)[1]
        },
        fetchData: function (callback) {
            const ID = this.fetchID();
            $.ajax({
                url: 'http://www.xiongmaoyouxuan.com/api/detail',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    id: ID
                },
                success: function (res) {
                    if (res.code === 200 && res.data) {
                        callback(res.data)
                    }
                }.bind(this)
            })
        },
        formatData: function (data) {
            const banner = data.detail.photo.map(function (el, i) {
                return el.url;
            })

            const descContentList = data.detail.descContentList.map(function (el, i) {
                return el.image.url
            })
            const detail = {
                title: data.detail.title,
                saleNum: data.detail.saleNum,
                originPrice: data.detail.originPrice,
                price: data.detail.price,
                coupon: data.detail.couponValue,
                couponTime: data.detail.expireDate
            }
            const shop = {
                shopName: data.shop.nickname,
                shopLogo: data.shop.shopLogo,
                deliveryScore: data.shop.deliveryScore,
                itemScore: data.shop.itemScore,
                serviceScore: data.shop.serviceScore
            }
            return {
                banner: banner,
                descContentList: descContentList,
                detail: detail,
                shop: shop
            }
        },
        detailRender: function (data) {
            const temp = this.formatData(data);
            const html = template('detail', temp)
            $('.nav').after(html)
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })
        },
        init: function () {
            this.fetchData(this.detailRender.bind(this))
        }
    }

    data.init()
}